<template>
  <div class="index">
    <div class="tasty_wrap">
      <div class="tasty_goods_bg">
        <div class="tasty_goods_title">
          美食商品
        </div>
      </div>
      <div class="tasty_goods_wrap">
        <div class="tasty_goods_list">
          <div class="tasty_goods_item_wrap">
            <div class="tasty_goods_item">
              <div class="tasty_goods_item_c">
                <img src="../../assets/images/large.png" alt="">
                <div class="right">
                  <div class="title">西湖醋鱼</div>
                  <div class="content">西湖醋鱼是杭州名菜中的看家菜, 又称西湖醋鱼是杭州名菜中的看家菜, 又称又称西湖醋鱼是杭州名菜中的看家菜, 又称</div>
                  <div class="price">118 <span>元</span></div>
                </div>
              </div>
            </div>
            <div class="tasty_goods_item">
              <div class="tasty_goods_item_c">
                <img src="../../assets/images/large.png" alt="">
                <div class="right">
                  <div class="title">西湖醋鱼</div>
                  <div class="content">西湖醋鱼是杭州名菜中的看家菜, 又称西湖醋鱼是杭州名菜中的看家菜, 又称又称西湖醋鱼是杭州名菜中的看家菜, 又称</div>
                  <div class="price">118 <span>元</span></div>
                </div>
              </div>
            </div>
            <div class="tasty_goods_item">
              <div class="tasty_goods_item_c">
                <img src="../../assets/images/large.png" alt="">
                <div class="right">
                  <div class="title">西湖醋鱼</div>
                  <div class="content">西湖醋鱼是杭州名菜中的看家菜, 又称西湖醋鱼是杭州名菜中的看家菜, 又称又称西湖醋鱼是杭州名菜中的看家菜, 又称</div>
                  <div class="price">118 <span>元</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="more">
          <i></i>
          <span>更多内容</span>
        </div>
      </div>
      <div class="courseware_teaching_wrap">
        <div class="courseware_teaching">
          <div class="courseware_teaching_title">
            课件教学
          </div>
        </div>
        <div class="courseware_teaching_list">
          <div class="homeCon1">
            <div class="homeCon1-banner">
              <div class="bannerRight">
                <swiper ref="mySwiper" :options="swiperOption">
                  <swiper-slide v-for="(item, index) in 6" :key="index">
                    <img src="../../assets/images/large.png" alt="">
                    <div class="name">精品课{{ index }}</div>
                    <div class="play">
                      <i></i>
                    </div>
                  </swiper-slide>
                </swiper>
              </div>
            </div>
          </div>
          <div class="fit">
            <div class="fit_wrap">
              <div class="button button_prev" slot="button-prev">
                <i></i>
                <span>上一个</span>
              </div>
              <div class="button button_next" slot="button-next">
                <span>下一个</span>
                <i></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="video_wrap">
        <div class="video_wrap_top_bg">
          <div class="video_wrap_top_title">
            视频展播
          </div>
        </div>
        <div class="video_swiper">
          <div class="video_swiper_wrap">
            <div class="video_swiper_list">
              <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(image, index) in images" :key="index">
                  <img v-lazy="image" />
                  <div class="play"><i></i></div>
                </van-swipe-item>
              </van-swipe>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload);

import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";
export default {
  name: '',
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOption: {
        // 衔接滑动
        loop: true,
        // 自动滑动
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        slidesPerView: 2,
        spaceBetween: 10,
        slideToClickedSlide: true,
        // 使用前进后退按钮来控制Swiper切换。
        navigation: {
          nextEl: '.button_next',
          prevEl: '.button_prev',
        },
        pagination: {
          el: '.swiper-pagination', //与slot="pagination"处 class 一致
          clickable: true,
          type: 'fraction',
        },
      },
      images: [
        'https://img01.yzcdn.cn/vant/apple-1.jpg',
        'https://img01.yzcdn.cn/vant/apple-2.jpg',
      ],
    };
  },
  created() {

  },
  mounted() {

  },
  methods: {

  },
}
</script>
<style scoped lang="scss">
.index {
  width: 100%;
  height: 115.75rem;
  background: url('../../assets/images/zlyw_bg.png') no-repeat;
  background-size: 100% 100%;

  .tasty_wrap {
    padding-top: 30rem;

    .tasty_goods_bg {
      width: 11.0625rem;
      height: 3.0625rem;
      background: url('../../assets/images/zlyw_1.png') no-repeat;
      background-size: 100% 100%;
      display: block;
      margin: 0 auto;

      .tasty_goods_title {
        font-size: 1.5rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #141212;
        line-height: 3.0625rem;
        text-align: center;
      }
    }

    .tasty_goods_wrap {
      width: 22.18rem;
      border: 1px dashed #000;
      margin: 0 auto;
      margin-top: 1.5625rem;

      .tasty_goods_list {
        width: 21.9375rem;
        height: 24.5rem;
        border: 2px solid #000;
        background: #a5f1f4;

        .tasty_goods_item_wrap {
          padding: .3125rem 0;

          .tasty_goods_item {
            border-bottom: 2px dotted #F8E485;

            .tasty_goods_item_c {
              display: flex;
              padding: .5rem 1rem .5rem 1rem;

              img {
                width: 8.875rem;
                height: 6.8125rem;
                border-radius: .375rem;
              }

              .right {
                padding-left: .3125rem;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .title {
                  font-size: .875rem;
                  font-family: Source Han Sans SC;
                  font-weight: 500;
                  color: #333333;
                  line-height: 1.375rem;
                }

                .content {
                  font-size: .75rem;
                  font-family: Source Han Sans SC;
                  font-weight: 400;
                  color: #666666;
                  line-height: 1.125rem;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 2;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                }

                .price {
                  font-size: 1.0625rem;
                  font-family: Source Han Sans SC;
                  font-weight: 400;
                  color: #FF5167;
                  line-height: 1.1875rem;
                  text-align: right;

                  span {
                    font-size: .75rem;
                    font-family: Source Han Sans SC;
                    font-weight: 400;
                    color: #6B7272;
                    line-height: 1.1875rem;
                  }
                }
              }
            }
          }
        }

        .more {
          display: flex;
          align-items: center;
          justify-content: center;

          i {
            width: 1.25rem;
            height: 1.0625rem;
            background: url('../../assets/images/zlyw_2.png') no-repeat;
            background-size: 100% 100%;
            display: inline-block;
            margin-right: .5625rem;
          }

          span {
            font-size: 1rem;
            font-family: eryaxindahei;
            font-weight: 600;
            color: #000001;
            letter-spacing: .3125rem;
          }
        }
      }

      .more {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #000;
        border-top: 0;
        line-height: 1.5625rem;
        background: #f8e485;

        i {
          width: 1.25rem;
          height: 1.0625rem;
          background: url('../../assets/images/zlyw_2.png') no-repeat;
          background-size: 100% 100%;
          display: inline-block;
          margin-right: .5625rem;
        }

        span {
          font-size: 1rem;
          font-family: eryaxindahei;
          font-weight: 600;
          color: #000001;
          letter-spacing: .3125rem;
        }
      }
    }

    .courseware_teaching_wrap {
      margin-top: 2.25rem;

      .courseware_teaching {
        width: 11.0625rem;
        height: 3.0625rem;
        background: url('../../assets/images/zlyw_1.png') no-repeat;
        background-size: 100% 100%;
        display: block;
        margin: 0 auto;

        .courseware_teaching_title {
          font-size: 1.5rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #141212;
          line-height: 3.0625rem;
          text-align: center;
        }
      }

      .courseware_teaching_list {
        width: 22rem;
        height: 17.8125rem;
        background: #A5F1F4;
        border: 3px solid #000000;
        margin: 0 auto;
        margin-top: 2.375rem;
        position: relative;

        .homeCon1 {
          margin: 15px 15px 0 15px;

          .swiper-slide {
            // width: 9.6875rem !important;
            height: 15.3125rem;
            // background: #F2F4F7;
            border-radius: .5rem;
            position: relative;

            img {
              width: 100%;
              height: 13.3125rem;
              object-fit: cover;
              border-radius: .5rem;
              display: block;
            }

            .name {
              font-size: .875rem;
              font-family: Source Han Sans SC;
              font-weight: 500;
              color: #333333;
              line-height: 1.125rem;
              padding-top: .5rem;
              text-align: center;
            }

            .play {
              width: 1.9375rem;
              height: 1.9375rem;
              border: 2px solid #1f969a;
              position: absolute;
              top: 0;
              border-radius: 50%;
              position: absolute;
              left: 50%;
              -webkit-transformX: translate(-50%);
              transform: translateX(-50%);
              margin-top: 5.5rem;
              background: #F2F4F7;

              i {
                width: .75rem;
                height: 1rem;
                background: url('../../assets/images/zlyw_5.png') no-repeat;
                background-size: 100% 100%;
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);

              }
            }
          }
        }


      }

      .fit {
        border: 1px dashed #000;
        background: #f8e485;

        .fit_wrap {
          height: 1.5625rem;
          line-height: 1.5625rem;
          border: 1px solid #000;
          display: flex;
          justify-content: space-between;

          .button {
            font-size: 16px;
            font-family: eryaxindahei;
            font-weight: 600;
            color: #000;
            display: flex;
            align-items: center;
          }

          .button_prev {
            i {
              width: 17px;
              height: 20px;
              background: url('../../assets/images/zlyw_3.png') no-repeat;
              background-size: 100% 100%;
              display: inline-block;
              margin: 0 5px;
            }
          }

          .button_next {
            i {
              width: 17px;
              height: 20px;
              background: url('../../assets/images/zlyw_4.png') no-repeat;
              background-size: 100% 100%;
              display: inline-block;
              margin: 0 5px;
            }
          }
        }
      }
    }

    .video_wrap {
      margin-top: 2.4375rem;

      .video_wrap_top_bg {
        width: 11.0625rem;
        height: 3.0625rem;
        background: url('../../assets/images/zlyw_1.png') no-repeat;
        background-size: 100% 100%;
        display: block;
        margin: 0 auto;

        .video_wrap_top_title {
          font-size: 1.5rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #141212;
          line-height: 3.0625rem;
          text-align: center;
        }
      }

      .video_swiper {
        margin-top: 35px;

        .video_swiper_wrap {
          width: 22.25rem;
          border: 1px dashed #000;
          margin: 0 auto;

          .video_swiper_list {
            width: 22rem;
            height: 16.9375rem;
            border: 2px solid #000;

            ::v-deep .van-swipe {
              width: 19.9375rem;
              height: 16rem;
              margin: 0 auto;
              margin-top: .9375rem;

              img {
                width: 19.9375rem;
                height: 14.25rem;
                background: #F2F4F7;
                border-radius: .5rem;
              }

              .play {
                width: 1.9375rem;
                height: 1.9375rem;
                border: 2px solid #1f969a;
                position: absolute;
                top: 0;
                border-radius: 50%;
                position: absolute;
                left: 50%;
                -webkit-transformX: translate(-50%);
                transform: translateX(-50%);
                margin-top: 6.5rem;
                background: #F2F4F7;

                i {
                  width: .75rem;
                  height: 1rem;
                  background: url('../../assets/images/zlyw_5.png') no-repeat;
                  background-size: 100% 100%;
                  display: block;
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  -webkit-transform: translate(-35%, -50%);
                  transform: translate(-35%, -50%);
                }
              }

              .van-swipe__indicator--active {
                background-color: #20969A;
                opacity: 1;
              }
            }
          }
        }
      }
    }
  }
}
</style>